<script>
import Footer from '@/components/Footer.vue';
import { reactive, toRefs } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import { getSessionStorage } from "@/common";
import moment from 'moment';

export default {
    setup() {
        const router = useRouter();
        const state = reactive({
            user: getSessionStorage('user'),
            ordersArr: [],
            orderId: ''
        })

        loadAppointmentList()
        function loadAppointmentList() {
            axios.post('/api/orders/getOrderList', { userId: state.user.userId }).then((response) => {
                console.log(response.data);
                let arr = response.data.data
                for (let i = 0; i < arr.length; i++) {
                    arr[i].orderDate = moment(arr[i].orderDate).format('YYYY-MM-DD')
                }

                state.ordersArr = arr

            }).catch((error) => {
                console.log(error);
            });
        }

        function toAppointmentcancel(orderId) {
            ElMessageBox.confirm(
                '是否确认取消预约？',
                '取消预约',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'Warning',
                }
            ).then(() => {
                ElMessage({
                    type: 'success',
                    message: '取消预约成功！',
                })
                axios.post('/api/orders/cancelOrder', { orderId: orderId }).then((response) => {
                    console.log(response.data)
                    let apires = response.data;
                    if (apires.status == 200) {
                        // alert('取消预约成功');
                        router.push('/appointmentcancel')
                        // loadAppointmentList(); // 重新加载预约列表
                    } else {
                        alert(apires.desc);
                        // return;
                    }
                }).catch((error) => {
                    console.log(error);
                });
            })

        }


        // 计算属性判断日期是否可取消
        const isCancelable = (orderDate) => {
            const orderMoment = moment(orderDate);
            const today = moment();
            return orderMoment.isAfter(today) && orderMoment.diff(today, 'days') > 1;
        };

        // 计算属性判断日期是否接近
        const isSoon = (orderDate) => {
            const orderMoment = moment(orderDate);
            const today = moment();
            return orderMoment.isAfter(today) && orderMoment.diff(today, 'days') <= 1;
        };
        return {
            ...toRefs(state),
            toAppointmentcancel,
            isCancelable,
            isSoon
        }
    },
    components: {
        Footer
    }
}
</script>



<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>我的预约</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul>
            <li v-for="(orders, index) in ordersArr" :key="orders.orderId">
                <div class="left">
                    <p>{{ orders.orderDate }}</p>
                    <p>{{ orders.smName }}</p>
                </div>
                <!-- <div class="right" v-if="isCancelable(orders.orderDate)" @click="toAppointmentcancel(orders.orderId)">
                    取消预约
                </div> -->
                <!-- 根据日期显示不同的内容或不显示 -->
                <div class="right" v-if="isCancelable(orders.orderDate)" @click="toAppointmentcancel(orders.orderId)">
                    取消预约
                </div>
                <div class="right" v-else-if="isSoon(orders.orderDate)">
                    待体检
                </div>
                <div class="right" v-else>
                    已完成
                </div>
            </li>
        </ul>

        <div class="bottom-ban"></div>
        <Footer></Footer>
    </div>
</template>



<style scoped>
/*********************** 总容器 ***********************/
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

/*********************** header ***********************/
header {
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;

    position: fixed;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
    padding: 0 3.6vw;
}

header .fa {
    font-size: 8vw;
}

/*********************** common样式 ***********************/
.top-ban {
    width: 100%;
    height: 15.7vw;
}

.bottom-ban {
    width: 100%;
    height: 14.2vw;
}

/*********************** ul ***********************/
ul {
    width: 86vw;
    margin: 0 auto;
}

ul li {
    width: 100%;
    height: 14vw;
    border-bottom: solid 1px #EEE;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul li .left {
    user-select: none;
    cursor: pointer;
}

ul li .left p:first-child {
    color: #555;
    font-size: 3.3vw;
}

ul li .left p:last-child {
    color: #333;
    font-size: 4.2vw;
    font-weight: 600;
}

ul li .right {
    font-size: 4vw;
    color: #E6A23C;
}
</style>